<script lang="ts">
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Message from '$lib/components/Feedback/Message/message';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';
	const code1 = `<script lang="ts">
	import Message from '$lib/components/Feedback/Message/message';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
<\/script>
<div class="example">
	<div class="example-group">
		<RectButton label="info" variant="info" type="ghost" onClick={()=>{Message.info('info 操作成功！')}}></RectButton>
		<RectButton label="primary" variant="primary" type="ghost" onClick={()=>{Message.primary('primary 操作成功！')}}></RectButton>
		<RectButton label="success" variant="success" type="ghost" onClick={()=>{Message.success('success 操作成功！')}}></RectButton>
		<RectButton label="warning" variant="warning" type="ghost" onClick={()=>{Message.warning('warning 操作成功！')}}></RectButton>
		<RectButton label="error" variant="error" type="ghost" onClick={()=>{Message.error('error 操作成功！')}}></RectButton>
	</div>
</div>`;
	const code2 = `<script lang="ts">
	import Message from '$lib/components/Feedback/Message/message';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
<\/script>
<div class="example">
	<div class="example-group">
		<RectButton label="top" variant="success" type="ghost" onClick={()=>{Message.success({message:'top 操作成功！',position:'top'})}}></RectButton>
		<RectButton label="top-left" variant="warning" type="ghost" onClick={()=>{Message.warning({message:'top-left 操作成功！',position:'top-left'})}}></RectButton>
		<RectButton label="top-right" variant="error" type="ghost" onClick={()=>{Message.error({message:'top-right 操作成功！',position:'top-right'})}}></RectButton>
		<RectButton label="bottom" variant="success" type="ghost" onClick={()=>{Message.success({message:'bottom 操作成功！',position:'bottom'})}}></RectButton>
		<RectButton label="bottom-left" variant="warning" type="ghost" onClick={()=>{Message.warning({message:'bottom-left 操作成功！',position:'bottom-left'})}}></RectButton>
		<RectButton label="bottom-right" variant="error" type="ghost" onClick={()=>{Message.error({message:'bottom-right 操作成功！',position:'bottom-right'})}}></RectButton>
	</div>
</div>`;
const attributesData = [
		{ id: 1, name: 'type', describe: '消息类型', type: ['info','primary','success','warning','error'], defaulValue: 'primary' },
		{ id: 2, name: 'message', describe: '消息内容', type: 'string', defaulValue: '' },
		{ id: 3, name: 'position', describe: '消息位置', type: ['top','top-left','top-right','bottom','bottom-left','bottom-right'], defaulValue: 'top' },
		{ id: 4, name: 'duration', describe: '显示时间，单位为毫秒。', type: 'number', defaulValue: '2000ms' },
		{ id: 5, name: 'showClose', describe: '是否显示关闭按钮。', type: 'boolean', defaulValue: 'false' },
	];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Message 消息提示</div>
		<div class="describe">
			常用于主动操作后的反馈提示， 与 Notification 的区别是后者更多用于系统级通知的被动提醒。
		</div>
	</div>
	<div class="subtitle">
		<div class="name">Api 方式调用</div>
		<div class="describe">用来显示「成功、警告、消息、错误」类的操作反馈。</div>
		<ComponentPreview code={code1}>
			<div class="example">
				<div class="example-group">
					<RectButton label="info" variant="info" type="ghost" onClick={()=>{Message.info('info 操作成功！')}}	></RectButton>
					<RectButton label="primary" variant="primary" type="ghost" onClick={()=>{Message.primary('primary 操作成功！')}}></RectButton>
					<RectButton label="success" variant="success" type="ghost" onClick={()=>{Message.success('success 操作成功！')}}></RectButton>
					<RectButton label="warning" variant="warning" type="ghost" onClick={()=>{Message.warning('warning 操作成功！')}}></RectButton>
					<RectButton label="error" variant="error" type="ghost" onClick={()=>{Message.error('error 操作成功！')}}></RectButton>
				</div>
			</div>
		</ComponentPreview>
		<div class="name">Placement</div>
		<div class="describe">控制消息出现的位置。 消息可以显示在查看端口的顶部(默认) 或其他位置。</div>
		<ComponentPreview code={code2}>
			<div class="example">
				<div class="example-group">
					<RectButton label="top" variant="success" type="ghost" onClick={()=>{Message.success({message:'top 操作成功！',position:'top'})}}></RectButton>
					<RectButton label="top-left" variant="warning" type="ghost" onClick={()=>{Message.warning({message:'top-left 操作成功！',position:'top-left'})}}></RectButton>
					<RectButton label="top-right" variant="error" type="ghost" onClick={()=>{Message.error({message:'top-right 操作成功！',position:'top-right'})}}></RectButton>
					<RectButton label="bottom" variant="success" type="ghost" onClick={()=>{Message.success({message:'bottom 操作成功！',position:'bottom'})}}></RectButton>
					<RectButton label="bottom-left" variant="warning" type="ghost" onClick={()=>{Message.warning({message:'bottom-left 操作成功！',position:'bottom-left'})}}></RectButton>
					<RectButton label="bottom-right" variant="error" type="ghost" onClick={()=>{Message.error({message:'bottom-right 操作成功！',position:'bottom-right'})}}></RectButton>
				</div>
			</div>
		</ComponentPreview>
	</div>
	<div class="subtitle">
		<div class="name">Message Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}>
			{#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>
</div>